<template>
    <div class="add-invitation-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="150px"
                ref="form"
                :rules="rules">
                <el-form-item label="描述" prop="describe">
                    <el-input
                        v-model="form.describe"
                        placeholder="请输入续费描述"
                        class="input-width"
                    ></el-input>
                </el-form-item>
                <el-form-item label="有效期天数" prop="length">
                    <el-input-number
                        v-model="form.length"
                        :min="1"
                        class="input-width"/>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input-number
                        v-model="form.price"
                        :min="0"
                        :precision="2"
                        :step="0.1"
                        class="input-width"/>
                </el-form-item>
                <el-form-item label="苹果内购ID" prop="apple_store_id">
                    <el-input
                        v-model="form.apple_store_id"
                        placeholder="请输入苹果内购ID"
                        class="input-width"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onClickConfirm()">保 存</el-button>
                    <el-button @click="$router.go(-1)">返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>

export default {
    data() {
        return {
            posting: false,
            form: {
                describe: '',
                length: '',
                price: '',
                apple_store_id: '',
            },
            id: this.$route.params.id,
            rules: {
                describe: [
                    { required: true, message: '有效期描述不能为空', trigger: 'blur' },
                ],
                length: [
                    { required: true, message: '有效期天数不能为空', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '有效期价格不能为空', trigger: 'blur' },
                ],
                apple_store_id: [
                    { required: true, message: '苹果内购ID不能为空', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        onClickConfirm() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                this.posting = true;
                if (this.id) {
                    API.put(`product/${this.id}`, this.form).then(() => {
                        this.posting = false;
                        this.$router.push({name: 'ExpireManage'});
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                } else {
                    API.post('product', this.form).then(() => {
                        this.$router.push({name: 'ExpireManage'});
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                }
            });
        },
        fetchData() {
            if (this.id) {
                API.get(`product/${this.id}`).then((res) => {
                    for (const i of Object.keys(this.form)) {
                        if (res[i]) this.form[i] = res[i];
                    }
                });
            }
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss" scpoed>
.add-invitation-page {
    .avatar-uploader {
        min-width: 150px;
        min-height: 150px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        min-width: 150px;
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .avatar {
        min-width: 150px;
        min-height: 150px;
        display: block;
        max-width: 200px;
    }
}
</style>
